<template>
  <div class="simple-date-example">
    <h2>简单日期工具使用示例</h2>
    
    <div class="example-section">
      <h3>当前日期</h3>
      <p>今天: {{ today }}</p>
      <p>今天(字符串): {{ todayString }}</p>
    </div>
    
    <div class="example-section">
      <h3>格式化日期</h3>
      <input v-model="selectedDate" type="date" />
      <p>格式化日期: {{ formattedDate }}</p>
      <p>格式化日期时间: {{ formattedDateTime }}</p>
      <p>相对时间: {{ relativeTime }}</p>
    </div>
    
    <div class="example-section">
      <h3>日期计算</h3>
      <p>7天后: {{ nextWeek }}</p>
      <p>与今天相差天数: {{ daysFromToday }}</p>
    </div>
    
    <div class="example-section">
      <h3>日期范围检查</h3>
      <div>
        <label>开始日期:</label>
        <input v-model="rangeStart" type="date" />
      </div>
      <div>
        <label>结束日期:</label>
        <input v-model="rangeEnd" type="date" />
      </div>
      <p>选中日期在范围内: {{ isInRange }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import {
  formatDate,
  formatDateTime,
  getRelativeTime,
  isDateBetween,
  getDaysBetween,
  addDays,
  today,
  todayString,
} from '#/utils/simple-date';

// 响应式数据
const selectedDate = ref('');
const rangeStart = ref('');
const rangeEnd = ref('');

// 计算属性
const nextWeek = computed(() => formatDate(addDays(today(), 7)));
const daysFromToday = computed(() => {
  return selectedDate.value ? getDaysBetween(today(), selectedDate.value) : 0;
});
const formattedDate = computed(() => {
  return selectedDate.value ? formatDate(selectedDate.value) : '';
});
const formattedDateTime = computed(() => {
  return selectedDate.value ? formatDateTime(selectedDate.value) : '';
});
const relativeTime = computed(() => {
  return selectedDate.value ? getRelativeTime(selectedDate.value) : '';
});
const isInRange = computed(() => {
  if (!selectedDate.value || !rangeStart.value || !rangeEnd.value) return false;
  return isDateBetween(selectedDate.value, rangeStart.value, rangeEnd.value);
});
</script>

<style scoped>
.simple-date-example {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.example-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.example-section h3 {
  margin-top: 0;
  color: #333;
}

input {
  padding: 8px;
  margin: 5px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

label {
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
}
</style>